/* 应用根样式 */
.app {
  min-height: 100vh;
  background-color: theme('colors.gray.50');
  color: theme('colors.gray.900');
  transition: background-color 0.2s ease, color 0.2s ease;
}

.app.dark {
  background-color: theme('colors.gray.900');
  color: theme('colors.gray.100');
}

/* Ant Design 组件深色模式适配 */
.dark .ant-layout {
  background: theme('colors.gray.900') !important;
}

.dark .ant-layout-header {
  background: theme('colors.gray.800') !important;
  border-bottom: 1px solid theme('colors.gray.700') !important;
}

.dark .ant-layout-footer {
  background: theme('colors.gray.800') !important;
  border-top: 1px solid theme('colors.gray.700') !important;
  color: theme('colors.gray.300') !important;
}

.dark .ant-layout-content {
  background: theme('colors.gray.900') !important;
}

.dark .ant-layout-sider {
  background: theme('colors.gray.800') !important;
}

/* 自定义滚动条 */
.app ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.app ::-webkit-scrollbar-track {
  background: theme('colors.gray.100');
  border-radius: 4px;
}

.app.dark ::-webkit-scrollbar-track {
  background: theme('colors.gray.800');
}

.app ::-webkit-scrollbar-thumb {
  background: theme('colors.gray.300');
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.app ::-webkit-scrollbar-thumb:hover {
  background: theme('colors.gray.400');
}

.app.dark ::-webkit-scrollbar-thumb {
  background: theme('colors.gray.600');
}

.app.dark ::-webkit-scrollbar-thumb:hover {
  background: theme('colors.gray.500');
}

/* 选择文本样式 */
.app ::selection {
  background-color: theme('colors.primary.100');
  color: theme('colors.primary.900');
}

.app.dark ::selection {
  background-color: theme('colors.primary.800');
  color: theme('colors.primary.100');
}

/* 焦点样式 */
.app :focus-visible {
  outline: 2px solid theme('colors.primary.500');
  outline-offset: 2px;
}

/* 链接样式 */
.app a {
  color: theme('colors.primary.600');
  text-decoration: none;
  transition: color 0.2s ease;
}

.app a:hover {
  color: theme('colors.primary.700');
  text-decoration: underline;
}

.app.dark a {
  color: theme('colors.primary.400');
}

.app.dark a:hover {
  color: theme('colors.primary.300');
}

/* 页面过渡动画 */
.page-transition-enter {
  opacity: 0;
  transform: translateX(20px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms ease, transform 300ms ease;
}

.page-transition-exit {
  opacity: 1;
  transform: translateX(0);
}

.page-transition-exit-active {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 300ms ease, transform 300ms ease;
}

/* 加载状态 */
.app-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
}

.app-loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid theme('colors.gray.200');
  border-top: 4px solid theme('colors.primary.600');
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.app.dark .app-loading-spinner {
  border-color: theme('colors.gray.700');
  border-top-color: theme('colors.primary.400');
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误状态 */
.app-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 2rem;
  text-align: center;
}

.app-error-icon {
  width: 64px;
  height: 64px;
  color: theme('colors.red.500');
  margin-bottom: 1rem;
}

.app-error-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: theme('colors.gray.900');
  margin-bottom: 0.5rem;
}

.app.dark .app-error-title {
  color: theme('colors.gray.100');
}

.app-error-message {
  color: theme('colors.gray.600');
  margin-bottom: 1.5rem;
}

.app.dark .app-error-message {
  color: theme('colors.gray.400');
}

/* 响应式布局 */
@media (max-width: 768px) {
  .app {
    font-size: 14px;
  }
  
  .page-transition-enter,
  .page-transition-exit-active {
    transform: translateY(20px);
  }
  
  .page-transition-enter-active,
  .page-transition-exit {
    transform: translateY(0);
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .app {
    border: 2px solid currentColor;
  }
  
  .app a {
    text-decoration: underline;
  }
  
  .app :focus-visible {
    outline-width: 3px;
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .app * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .page-transition-enter-active,
  .page-transition-exit-active {
    transition: none;
  }
  
  .app-loading-spinner {
    animation: none;
  }
}

/* 打印样式 */
@media print {
  .app {
    background: white !important;
    color: black !important;
  }
  
  .app-loading,
  .app-error {
    display: none;
  }
}

/* 无障碍支持 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 跳转到主内容链接 */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 6px;
  background: theme('colors.primary.600');
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
  transition: top 0.3s ease;
}

.skip-to-content:focus {
  top: 6px;
}

/* 主内容区域 */
#main-content {
  outline: none;
}

/* 通知样式 */
.app-notification {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  max-width: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid theme('colors.gray.200');
  overflow: hidden;
  animation: slideInRight 0.3s ease-out;
}

.app.dark .app-notification {
  background: theme('colors.gray.800');
  border-color: theme('colors.gray.700');
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 移动端适配 */
@media (max-width: 640px) {
  .app-notification {
    left: 10px;
    right: 10px;
    max-width: none;
  }
}
